<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 
    form 自带的可以发送请求
    action 请求地址 会带有默认行为 会跳转到这个请求地址是=上（缺点）
    method 请求方式  默认是get

    提交事件被触发时、会携带带有name属性的所有表单标签内容到请求地址上
    会将name属性的值作为属性名 input的内容作为属性值  一键值对的形式携带在请求中

     https://cnodejs.org/api/v1/topics?page=1&tab=good&limit=1
     当请求时get请求时，会将数据拼接在URL路径之后 ？后面是数据 属性名=属性值$属性名2=属性值是2&...

请求的数据类型
application/x-www-form-urlencoded  //文本数据
multipart/form-data  //针对文件数据时
text/plain  //纯文本编码
    get 是http 请求中的一种 表示获取数据类型的请求
     -->
    <form action=" https://cnodejs.org/api/v1/topics" method="get">
        <input type="text" name="limit">
        <input type="submit" value="提交按钮">
    </form>
    <script>
        document.forms[0].onsubmit = function (e) {
            e.preventDefault();// 阻止了action的触发
            /*     console.log("==="); */
            // 获取一个form-data格式的数据 会将form表单中所有带有name属性的标签的内容获取到
            // 获取数据 name属性值作为属性名： input的value
            var data = new FormData(document.form[0]);
            console.log(data); //FormData对象
            console.log(data.get("limit"));//获取FormData中某个属性的值
            data.append("age", 18);//往FormData对象中添加新的数据
            console.log(data.get("age"));
        }
    </script>
</body>

</html>